<template>
  <div>
    <el-tabs v-model="activeName" >
    <el-tab-pane label="神彩" name="sc">
    </el-tab-pane>
    <el-tab-pane label="至尊宝" name="zzb">
    </el-tab-pane>
  </el-tabs>
 <div class="zu_box">
  <div v-if="activeName=='zzb'" class="zu_box_er">
    <!-- <zzbhd :passvalue="datail.hd"/> -->
    <zzbhd v-for="(item,index) in  datail" :passvalue="item" :key="index"/>
  </div>
  <div v-if="activeName=='sc'" class="zu_box_er">
    <zzbhd v-for="(item,index) in  scdatail" :passvalue="item" :key="index"/>
  </div>
  <div class="gonggao">
  <div class="gg_tit">清单公告</div>
  <div v-if="activeName=='zzb'">
  <div v-if="zzbgg" v-html="zzbgg"></div>
  <div v-if="zzbgg==''" style="text-align: center;margin: auto;">
  <img src="../assets//null.png" style="margin-top: 20px;" alt="">
  <p>暂无公告</p>
  </div>
  </div>
  <div v-if="activeName=='sc'">
  <div v-if="scgg" v-html="scgg"></div>
  <div v-if="scgg==''" style="text-align: center;margin: auto;">
  <img src="../assets//null.png" style="margin-top: 20px;" alt="">
  <p>暂无公告</p>
  </div>
  </div>
</div>
 </div>
  </div>
</template>
<!-- 
东北地区（3个）：黑龙江、吉林、辽宁。

华北地区（5个）：北京、天津、河北、山西、内蒙古。

华中地区（3个）：河南、湖北、湖南。

华东地区（8个）：山东、江苏、安徽、上海、浙江、江西、福建、台湾。

华南地区（5个）：广东、广西、海南、香港、澳门。

西北地区（5个）：陕西、甘肃、宁夏、青海、新疆。

西南地区（5个）：四川、贵州、云南、重庆、西藏。

-->
<script>
import QRCode from 'qrcodejs2'
import Clipboard from 'clipboard';
import CryptoJS from 'crypto-js'
import zzbhd from './zzbhd.vue';
export default {
    name: 'HelloWorld',
    components: { zzbhd },
    data() {
        return {
            activeName: 'zzb',
            datail:[],
            scdatail:[],
            zzbgg:'',
            scgg:''
        };
    },
    created() {
   this.init()
    },
    methods: {
     async  init(){
      await  this.$axios.get('/url.json').then((res)=>{
          this.datail=res.data.data
          this.scdatail=res.data.scdata
          this.scgg=res.data.scgg
          this.zzbgg=res.data.zzbgg
        })
      // this.datail=
      // [
      //     {
      //       "dq":'华东地区',
      //       "title":'上海、江苏、浙江、安徽、福建、江西、山东、台湾',
      //       "cm":"https://zzbcm.qcggg.cn/#/",
      //       "dzd":"https://zzbdzd.qcggg.cn/#/",
      //       "reg":"https://zzbreg-a.qcggg.cn/#/cmd/",
      //       "reg2":"https://zzbreg-a.qcggg.cn/#/",
      //       "dl":"https://zzbreg-a.qcggg.cn/#/download/cmd",
      //       "dl2":"https://zzbreg-a.qcggg.cn/#/download/dzd",
      //       "color":'#82848a'
      //      },
      //      {
      //       "dq":'华南地区',
      //       "title":'广东、广西、海南、香港、澳门',
      //       "cm":"https://zzbcm.qlmlgxql.com/#/",
      //       "dzd":"https://zzbdzd.qlmlgxql.com/#/",
      //       "reg":"https://zzbreg-a.qlmlgxql.com/#/cmd/",
      //       "reg2":"https://zzbreg-a.qlmlgxql.com/#/",
      //       "dl":"https://zzbreg-a.qlmlgxql.com/#/download/cmd",
      //       "dl2":"https://zzbreg-a.qlmlgxql.com/#/download/dzd",
      //       "color":'#18a188'
      //      },    
      //     ]
      //     this.scdatail=
      // [
      //     {
      //       "dq":"大陆",
      //       "title":"hzmocha.cn",
      //       "cm":"https://sccm.hzmocha.cn/#/",
      //       "dzd":"https://scdzd.hzmocha.cn/#/",
      //       "reg":"https://screg-a.hzmocha.cn/#/cmd/",
      //       "reg2":"https://screg-a.hzmocha.cn/#/",
      //       "dl":"https://screg-a.hzmocha.cn/#/download/cmd",
      //       "dl2":"https://screg-a.hzmocha.cn/#/download/dzd",
      //       "color":''
      //      },
      //      {
      //       "dq":"香港1",
      //       "title":"aoaonb.co",
      //       "cm":"https://sccm.aoaonb.co/#/",
      //       "dzd":"https://scdzd.aoaonb.co/#/",
      //       "reg":"https://screg-a.aoaonb.co/#/cmd/",
      //       "reg2":"https://screg-a.aoaonb.co/#/",
      //       "dl":"https://screg-a.aoaonb.co/#/download/cmd",
      //       "dl2":"https://screg-a.aoaonb.co/#/download/dzd",
      //       "color":''
      //      },
      //      {
      //       "dq":"香港2",
      //       "title":"aoaonb.com",
      //       "cm":"https://sccm.aoaonb.com/#/",
      //       "dzd":"https://scdzd.aoaonb.com/#/",
      //       "reg":"https://screg-a.aoaonb.com/#/cmd/",
      //       "reg2":"https://screg-a.aoaonb.com/#/",
      //       "dl":"https://screg-a.aoaonb.com/#/download/cmd",
      //       "dl2":"https://screg-a.aoaonb.com/#/download/dzd",
      //       "color":''
      //      },
      //      {
      //       "dq":"日本",
      //       "title":"coccn.co",
      //       "cm":"https://sccm.coccn.co/#/",
      //       "dzd":"https://scdzd.coccn.co/#/",
      //       "reg":"https://screg-a.coccn.co/#/cmd/",
      //       "reg2":"https://screg-a.coccn.co/#/",
      //       "dl":"https://screg-a.coccn.co/#/download/cmd",
      //       "dl2":"https://screg-a.coccn.co/#/download/dzd",
      //       "color":''
      //      },
          
      //     ]
      //     this.scgg=''
      //     this.zzbgg='<br><span>1、滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答</span><br><br><span>2、啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</span><br><br><span>3、啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</span>'
// console.log(this.datail)
      }
    },
}
</script>
<style scoped>
.list{
  margin-top: 20px;
}
.tit{
  font-size: 20px;
  margin-bottom: 5px;
  font-weight: bold;
  display: flex;
  align-items: flex-end;
}
.zs{
  font-size: 16px;
  color: #999;
  padding-left: 20px;

}
.item{
  display: flex;
  padding-top:10px;
  align-items: center;
}
.lable{
  width: 120px;
}
.er{
  text-decoration:none; 
border-bottom:1px solid #409EFf; /* #555换成链接的颜色 */
display: inline-block; 
padding-bottom:2px;  /*这里设置你要空的距离*/
margin-right: 20px;
margin-left: 20px;
color: #409EFf;
}
.ewm{
  width: 100px;
  height: 100px;
  padding: 2px;
  border: 2px solid #409EFf;
}
.elinp{
  width: 200px;
  margin-right: 10px;
  margin-left: 10px;
}
.elinp2{
  margin-right: 10px;
  margin-left: 10px;
  width: 400px;
}
#root{
  margin-top: 20px;
}
.root_text{
  height: 10px;
  line-height: 10px;
}
.zu_box{
  width: 100%;
  display: flex;
}
.zu_box_er{
  width: calc(100% - 300px);
}
.gonggao{
  width: 250px;
  height: 500px;
  margin-left: 25px;
  border: 1px solid #999;
  border-radius: 10px;
  box-sizing:content-box;
  padding: 10px;
  overflow-wrap: break-word;
}
.gg_tit{
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  width: 100%;

}
</style>
